<script setup lang="ts">
import EChart from "~/contentScripts/views/echart.vue";

const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  data: {
    type: Array,
    default: () => []
  },
})
const tabs = ref<{ name: any; key: any; }[]>([]);
const tabActiveKey = ref<string>('');
const calcTabs = () => {
  const _tabs: { name: any; key: any; }[] = [];
  props.columns.forEach((item: any, index) => {
    if (item.dataIndex == '日期') return;
    if (item.dataIndex == '终端') return;
    if (tabActiveKey.value == '' && _tabs.length === 0) {
      tabActiveKey.value = item.dataIndex;
    }
    _tabs.push({
      name: item.title,
      key: item.dataIndex,
    })
  })
  tabs.value = _tabs;
}
const chartOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
    },
  },
  toolbox: {
    feature: {
      saveAsImage: {
        name: '交易概览-交易趋势图',
      },
    },
  },
  legend: {
    data: [],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  series: [],
});
const calcChart = () => {
  // 根据tabActiveKey 计算出chartOptions
  const _chartOptions: any = {
    ...chartOptions.value,
    // title: {
    //   ...chartOptions.value.title,
    //   text: tabActiveKey.value,
    // },
    legend: {
      ...chartOptions.value.legend,
      data: [],
    },
    xAxis: {
      ...chartOptions.value.xAxis,
      data: [],
    },
    series: [],
  };
  _chartOptions.toolbox.feature.saveAsImage.name = `交易概览-交易趋势图[${tabActiveKey.value}]`;
  const _legend: string[] = [];
  const _xAxis: string[] = [];
  const _series: any[] = [];
  let _data = [];
  // 把props.data中的数据按照日期从小到大排序
  _data = props.data.sort((a: any, b: any) => {
    return new Date(a['日期']).getTime() - new Date(b['日期']).getTime();
  });
  _data.forEach((item: any, index) => {
    if (_legend.indexOf(item['终端']) === -1) _legend.push(item['终端']);
    if (_xAxis.indexOf(item['日期']) === -1) _xAxis.push(item['日期']);
    _series.find((item1) => {
      return item1.name === item['终端'];
    }) || _series.push({
      name: item['终端'],
      type: 'line',
      // stack: 'Total',
      data: [],
      smooth: true,
    });
    if (tabActiveKey.value.includes('率')) {
      _series.find((item1) => {
        return item1.name === item['终端'];
      }).data.push(parseFloat(item[tabActiveKey.value]));
    } else {
      _series.find((item1) => {
        return item1.name === item['终端'];
      }).data.push(parseFloat(item[tabActiveKey.value]));
    }
  })
  _chartOptions.legend.data = _legend;
  _chartOptions.xAxis.data = _xAxis;
  _chartOptions.series = _series;
  chartOptions.value = _chartOptions;
  // 如果是率的话，修改tooltip的formatter
  if (tabActiveKey.value.includes('率')) {
    chartOptions.value.tooltip.formatter = (params: any) => {
      let str = params[0].axisValue + '<br/>';
      params.forEach((item: any) => {
        str += item.marker + item.seriesName + ': ' + item.value + '%<br/>';
      })
      return str;
    }
  } else {
    chartOptions.value.tooltip.formatter = (params: any) => {
      let str = params[0].axisValue + '<br/>';
      params.forEach((item: any) => {
        str += item.marker + item.seriesName + ': ' + item.value + '<br/>';
      })
      return str;
    }
  }
  // console.log(chartOptions.value);
}
calcTabs();
calcChart();
watch(() => props.columns, (val) => {
  calcTabs();
});
watch(() => tabActiveKey.value, (val) => {
  calcChart();
});
watch(() => props.data, (val) => {
  calcChart();
}, {
  deep: true,
});
</script>

<template>
  <div style="width: 80%;margin:0 auto;">
    <a-row :gutter="20">
      <a-col :style="{
        width: (100/tabs.length)+'%',
      }"
             v-for="item in tabs" :key="item.key"
      >
        <div class="tab-item" @click="tabActiveKey=item.key" :class="{
          active:item.key==tabActiveKey
        }"
        >
          {{ item.name }}
        </div>
      </a-col>
    </a-row>
    <EChart :options="chartOptions" style="height: 300px;margin-top: 20px;"/>
  </div>
</template>

<style lang="less" scoped>
.tab-item {
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 5px;
  border: 2px solid #eee;
  text-align: center;

  &:hover, &.active {
    color: #1890ff;
    border-color: #1890ff;
  }
}
</style>
